﻿//准备ExtJS环境
Ext.require
(
    [
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.state.*',
        'Ext.form.*'
    ]
);

//定义用户表格控件
Ext.define
(
    'Roadway.Grid',
    {
        extend: 'Ext.grid.Panel',

        //检索窗体
        win_search: null,

        //编辑窗体
        win_edit: null,

        //新增窗体
        win_create: null,

        //初始化组件
        initComponent: function ()
        {
            Ext.apply
            (
                this,
                {
                    listeners:
                    {
                        //设置两个指头的滚动
                        render: Common.ScrollableRender
                    },
                    dockedItems:
                    [
                        {
                            xtype: 'toolbar',
                            height: 36,
                            items:
                            [
                                {
                                    iconCls: 'icon-refresh',
                                    text: '刷新',
                                    scope: this,
                                    hidden: false,
                                    tooltip: '刷新数据',
                                    handler: this.onRefreshClick
                                },
                                '-',
                                {
                                    iconCls: 'icon-add',
                                    text: '新增',
                                    scope: this,
                                    hidden: false,
                                    tooltip: '新增线路',
                                    handler: this.onAddClick
                                },
                                {
                                    iconCls: 'icon-delete',
                                    text: '删除',
                                    disabled: true,
                                    hidden: false,
                                    itemId: 'roadway-delete',
                                    scope: this,
                                    tooltip: '删除线路',
                                    handler: this.onDeleteClick
                                },
                                {
                                    iconCls: 'icon-edit',
                                    text: '编辑',
                                    itemId: 'roadway-edit',
                                    disabled: true,
                                    hidden: false,
                                    scope: this,
                                    tooltip: '编辑线路',
                                    handler: this.onEditClick
                                },
                                {
                                    iconCls: 'icon-search',
                                    text: '检索',
                                    itemId: 'roadway-search',
                                    scope: this,
                                    hidden: false,
                                    tooltip: '检索线路',
                                    handler: this.onSearchClick
                                }
                            ]
                        }
                    ]
                }
            );
            this.callParent();
            this.getSelectionModel().on('selectionchange', this.onSelectionChange, this);
        },

        //处理选中项目变化事件
        onSelectionChange: function (selectionModel, selections)
        {
            //判断是否选中项目
            if (selections.length === 0)
            {
                //禁用删除按钮
                this.down('#roadway-delete').setDisabled(true);
                //禁用编辑按钮
                this.down('#roadway-edit').setDisabled(true);
            }
            else
            {
                //获得选中的行
                var selection = this.getView().getSelectionModel().getSelection()[0];

                //启用删除按钮
                this.down('#roadway-delete').setDisabled(selection.data.IsBuildin);
                //启用编辑按钮
                this.down('#roadway-edit').setDisabled(false);
            }
        },

        //处理删除按钮点击事件
        onDeleteClick: function ()
        {
            //获得数据存储对象
            var store = this.store;

            //获得选中的行
            var selection = this.getView().getSelectionModel().getSelection()[0];

            //判断是否选中行
            if (selection)
            {
                //询问是否确定删除
                Ext.Msg.show
                (
                    {
                        title: '删除线路',
                        width: 320,
                        height: 240,
                        msg: '确定要删除选中的线路"' + selection.data.RoadwayCode + '"吗?',
                        buttons: Ext.Msg.YESNO,
                        icon: Ext.Msg.QUESTION,
                        fn: function (button)
                        {
                            //判断是否确定删除 
                            if (button == 'yes')
                            {
                                //创建请求对象
                                Ext.Ajax.request
                                (
                                    {
                                        url: Common.MakeAbsoluteUrl('Delete'),
                                        method: HttpMethod.Post,
                                        params: selection.data,
                                        callback: function (options, success, response)
                                        {
                                            //处理错误
                                            if (Common.HandleError(options, success, response))
                                            {
                                                //刷新数据
                                                store.load();
                                            }
                                        }
                                    }
                                );
                            }
                        }
                    }
                );
            }
        },

        //处理刷新按钮点击事件
        onRefreshClick: function ()
        {
            //刷新数据
            this.store.load();
        },

        //处理新增按钮点击事件
        onAddClick: function ()
        {
            //判定窗体是否创建
            if (!this.win_create)
            {
                //获得数据存储对象
                var store = this.store;

                //创建窗体
                this.win_create = new Ext.Window
                (
                    {
                        title: '新增线路',
                        maximizable: false,
                        maximized: false,
                        width: 360,
                        height: 240,
                        bodyBorder: false,
                        draggable: true,
                        isTopContainer: true,
                        modal: true,
                        resizable: false,
                        bodyPadding: 0,
                        closeAction: 'hide',
                        closable: false,
                        layout: 'fit',
                        fieldDefaults:
                        {
                            labelAlign: 'left',
                            labelWidth: 72,
                            anchor: '100%'
                        },
                        items:
                        [
                            {
                                xtype: 'form',
                                method: 'POST',
                                waitMsgTarget: true,
                                waitTitle: Common.ApplicationName,
                                frame: false,
                                bodyPadding: 12,
                                bodyStyle: 'background-color:White;margin:0;',
                                bodyBorder: false,
                                border: 0,
                                autoScroll: true,
                                defaultType: 'textfield',
                                autoScroll: false,
                                fieldDefaults:
                                {
                                    labelAlign: 'left',
                                    labelWidth: 72,
                                    anchor: '100%',
                                    msgTarget: 'qtip',
                                    autoFitErrors: true
                                },
                                items:
                                [
                                    {
                                        xtype: 'textfield',
                                        name: 'RoadwayCode',
                                        fieldLabel: '路线编号',
                                        emptyText: '最长20个字符',
                                        allowBlank: false,
                                        maxLength: 20
                                    },
                                    {
                                        xtype: 'textfield',
                                        name: 'RoadwayName',
                                        fieldLabel: '路线名称',
                                        emptyText: '最长40个字符',
                                        allowBlank: false,
                                        maxLength: 40
                                    }
                                ],
                                buttons:
                                [
                                    {
                                        text: '确定',
                                        height: 26,
                                        margin: 3,
                                        handler: function ()
                                        {
                                            //获得表单对象
                                            var form = this.up('form').getForm();

                                            //检查数据是否合法
                                            if (form.isValid())
                                            {
                                                //提交数据
                                                form.submit
                                                (
                                                    {
                                                        url: Common.MakeAbsoluteUrl('Create'),
                                                        method: HttpMethod.Post,
                                                        scope: this.up('window'),
                                                        submitEmptyText: false,
                                                        waitTitle: '请稍候',
                                                        waitMsg: '正在保存数据...',
                                                        success: function (form, action)
                                                        {
                                                            //处理提交错误
                                                            if (Common.HandleFormError(form, action))
                                                            {
                                                                //加载数据
                                                                store.load();

                                                                //重置数据
                                                                form.reset();

                                                                //隐藏窗体
                                                                this.hide();
                                                            }
                                                        },
                                                        failure: Common.HandleFormFailure
                                                    }
                                                );
                                            }
                                        }
                                    },
                                    {
                                        text: '取消',
                                        height: 26,
                                        margin: 3,
                                        handler: function ()
                                        {
                                            //获得表单对象
                                            var form = this.up('form').getForm();
                                            //重置数据
                                            form.reset();
                                            //隐藏窗体
                                            this.up('window').hide();
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                 );
            }

            //显示窗体
            this.win_create.show();
        },

        //处理编辑按钮点击事件
        onEditClick: function ()
        {
            //获得数据存储对象
            var store = this.store;

            //获得选中的行
            var selection = this.getView().getSelectionModel().getSelection()[0];

            //判断是否选中行
            if (selection)
            {
                //判定窗体是否已经创建
                if (!this.win_edit)
                {
                    //创建窗体
                    this.win_edit = new Ext.Window
                    (
                        {
                            title: '编辑线路',
                            maximizable: false,
                            maximized: false,
                            width: 360,
                            height: 240,
                            autoScroll: false,
                            bodyBorder: false,
                            draggable: true,
                            isTopContainer: true,
                            modal: true,
                            resizable: false,
                            bodyPadding: 0,
                            closeAction: 'hide',
                            closable: false,
                            layout: 'fit',
                            fieldDefaults:
                            {
                                labelAlign: 'left',
                                labelWidth: 72,
                                anchor: '100%'
                            },
                            listeners:
                            {
                                //挂接显示事件
                                show: function (win, options)
                                {
                                    //查询表单对象对象
                                    var form = win.down('form').getForm();

                                    //加载数据
                                    form.load
                                    (
                                        {
                                            url: Common.MakeAbsoluteUrl('Details?id=' + win.current_row.RoadwayID),
                                            waitMsg: '数据加载中...',
                                            failure: function (form, action)
                                            {
                                                //处理错误
                                                Common.HandleFormFailure(form, action);

                                                //隐藏窗体
                                                win.hide();
                                            }
                                        }
                                    );
                                }
                            },
                            items:
                            [
                                {
                                    xtype: 'form',
                                    method: HttpMethod.POST,
                                    waitMsgTarget: true,
                                    waitTitle: Common.ApplicationName,
                                    frame: false,
                                    bodyPadding: 12,
                                    bodyStyle: 'background-color:White;margin:0;',
                                    bodyBorder: false,
                                    border: 0,
                                    defaultType: 'textfield',
                                    fieldDefaults:
                                    {
                                        labelAlign: 'left',
                                        labelWidth: 72,
                                        anchor: '100%',
                                        msgTarget: 'qtip',
                                        autoFitErrors: true
                                    },
                                    reader: Ext.create
                                    (
                                        'Ext.data.reader.Json',
                                        {
                                            model: 'RoadwayListRow',
                                            record: 'data',
                                            successProperty: 'success',
                                            idProperty: 'RoadwayID',
                                            messageProperty: 'message'
                                        }
                                    ),
                                    items:
                                    [
                                        {
                                            xtype: 'textfield',
                                            name: 'RoadwayID',
                                            allowBlank: false,
                                            hidden: true
                                        },
                                        {
                                            xtype: 'textfield',
                                            name: 'RoadwayCode',
                                            fieldLabel: '路线编号',
                                            emptyText: '最长20个字符',
                                            allowBlank: false,
                                            maxLength: 20
                                        },
                                        {
                                            xtype: 'textfield',
                                            name: 'RoadwayName',
                                            fieldLabel: '路线名称',
                                            emptyText: '最长40个字符',
                                            allowBlank: false,
                                            maxLength: 40
                                        }
                                    ],
                                    buttons:
                                    [
                                        {
                                            text: '确定',
                                            height: 26,
                                            margin: 3,
                                            handler: function ()
                                            {
                                                //获得表单对象
                                                var form = this.up('form').getForm();

                                                //检查数据是否合法
                                                if (form.isValid())
                                                {
                                                    //提交数据
                                                    form.submit
                                                    (
                                                        {
                                                            url: Common.MakeAbsoluteUrl('Update'),
                                                            scope: this.up('window'),
                                                            submitEmptyText: false,
                                                            waitTitle: '请稍候',
                                                            waitMsg: '正在保存数据...',
                                                            success: function (form, action)
                                                            {
                                                                //处理提交错误
                                                                if (Common.HandleFormError(form, action))
                                                                {
                                                                    //重置数据
                                                                    form.reset();
                                                                    //隐藏窗体
                                                                    this.hide();
                                                                    //刷新数据
                                                                    store.load();
                                                                }
                                                            },
                                                            failure: Common.HandleFormFailure
                                                        }
                                                    );
                                                }
                                            }
                                        },
                                        {
                                            text: '取消',
                                            height: 26,
                                            margin: 3,
                                            handler: function ()
                                            {
                                                //获得表单对象
                                                var form = this.up('form').getForm();

                                                //重置数据
                                                form.reset();

                                                //隐藏窗体
                                                this.up('window').hide();
                                            }
                                        }
                                    ]
                                }
                            ]
                        }
                    );
                }

                //设置当前行
                this.win_edit.current_row = selection.data;

                //显示窗体
                this.win_edit.show();
            }
        },

        //处理检索按钮点击事件
        onSearchClick: function ()
        {
            //获得数据存储对象
            var store = this.store;

            //判定窗体是否已经创建
            if (!this.win_search)
            {
                //创建窗体
                this.win_search = Ext.create
                (
                    'Ext.window.Window',
                    {
                        title: '检索线路',
                        maximizable: false,
                        maximized: false,
                        width: 360,
                        height: 240,
                        autoScroll: false,
                        bodyBorder: false,
                        draggable: true,
                        isTopContainer: true,
                        modal: true,
                        resizable: false,
                        bodyPadding: 0,
                        closeAction: 'hide',
                        closable: false,
                        layout: 'fit',
                        items:
                        [
                            {
                                xtype: 'form',
                                frame: false,
                                bodyPadding: 12,
                                bodyStyle: 'background-color:White;margin:0;',
                                bodyBorder: false,
                                border: 0,
                                defaultType: 'textfield',
                                fieldDefaults:
                                {
                                    labelAlign: 'left',
                                    labelWidth: 72,
                                    anchor: '100%'
                                },
                                items:
                                [
                                    {
                                        xtype: 'textfield',
                                        fieldLabel: '路线编号',
                                        itemId: 'txtRoadwayCode',
                                        allowBlank: true,
                                        maxLength: 20
                                    },
                                    {
                                        xtype: 'textfield',
                                        fieldLabel: '路线名称',
                                        itemId: 'txtRoadwayName',
                                        allowBlank: true,
                                        maxLength: 40
                                    }
                                ],
                                buttons:
                                [
                                        {
                                            text: '确定',
                                            height: 26,
                                            margin: 3,
                                            handler: function ()
                                            {
                                                //获得表单对象
                                                var form = this.up('form');

                                                //检查数据是否合法
                                                if (form.getForm().isValid())
                                                {
                                                    //隐藏窗体
                                                    this.up('window').hide();

                                                    //清除过滤条件
                                                    store.filters.clear();

                                                    //过滤数据
                                                    store.filter
                                                    (
                                                        [
                                                            {
                                                                property: 'RoadwayCode',
                                                                value: form.down('#txtRoadwayCode').getValue()
                                                            },
                                                            {
                                                                property: 'RoadwayName',
                                                                value: form.down('#txtRoadwayName').getValue()
                                                            }
                                                        ]
                                                    );
                                                }
                                            }
                                        },
                                    {
                                        text: '取消',
                                        height: 26,
                                        margin: 3,
                                        handler: function ()
                                        {
                                            //隐藏窗体
                                            this.up('window').hide();
                                        }
                                    }
                                ]
                            }
                            ]
                    }
                );
            }

            //显示窗体
            this.win_search.show();
        }
    }
);

//挂接环境准备完毕事件
Ext.onReady
(
    function ()
    {
        //初始化快速提示
        Ext.QuickTips.init();

        //设置状态保存提供者（当前设置为Cookie）
        Ext.state.Manager.setProvider( Ext.create( 'Ext.state.CookieProvider', { path: _Current_ActionUrl } ) );

        //初始化附加验证类型
        Common.InitAdditionalValidation();

        //创建数据存储对象
        var store = Ext.create
        (
            'Ext.data.Store',
            {
                pageSize: 20,
                autoSync: true,
                autoLoad: true,
                root: 'data',
                remoteFilter: true,
                remoteSort: true,
                model: 'RoadwayListRow',
                simpleSortMode: true,
                sorters:
                [
                    {
                        'property': 'RoadwayCode',
                        'direction': 'ASC'
                    }
                ],
                proxy:
                {
                    type: 'ajax',
                    url: Common.MakeAbsoluteUrl('Select'),
                    batchActions: false,
                    reader:
                    {
                        type: 'json',
                        root: 'data'
                    },
                    listeners:
                    {
                        exception: function (proxy, response, operation, options)
                        {
                            //处理错误
                            Common.HandleProxyError(proxy, response, operation, options);
                        }
                    }
                }
                //                listeners:
                //                {
                //                    //处理加载事件
                //                    load: function ( store, records, successful, operation, options )
                //                    {
                //                        //处理错误
                //                        Common.HandleError( options, successful, this.response );
                //                    }
                //                }
            }
        );

        Ext.create
        (
            'Roadway.Grid',
            {
                store: store,
                stateful: true,
                stateId: 'roadway-grid-state',
                height: 600,
                width: '100%',
                id: 'roadway-grid',
                title: '',
                renderTo: 'data-grid',
                columnLines: true,
                viewConfig:
                {
                    stripeRows: true,
                    loadingText: '数据加载中...',
                    singleSelect: true
                },
                //创建分页工具栏
                bbar: Ext.create
                (
                    'Ext.PagingToolbar',
                    {
                        store: store,
                        displayInfo: true,
                        displayMsg: '第 {0} - 第 {1} 条记录，共 {2} 条记录',
                        emptyMsg: ''
                    }
                ),
                columns:
                [
                    {
                        text: '线路编号',
                        width: 160,
                        sortable: true,
                        align: 'left',
                        dataIndex: 'RoadwayCode',
                        hideable: false
                    },
                    {
                        text: '线路名称',
                        width: 240,
                        sortable: true,
                        align: 'left',
                        dataIndex: 'RoadwayName',
                        hideable: false
                    },
                    {
                        text: '',
                        width: 240,
                        sortable: false,
                        align: 'left',
                        hideable: false,
                        flex: true
                    }
                ]
            }
        );

        $(window).bind
        (
            "resize",
            function ()
            {
                Ext.getCmp('roadway-grid').setWidth('99%');
                Ext.getCmp('roadway-grid').setWidth('100%');
            }
        );
    }
);
